<template>
	<div>
		<cl-crud @load="onLoad">
			<template #slot-copy="{scope}">
				<el-button type="text" @click="copyData(scope.row)">复制</el-button>
			</template>
			<template #slot-select-type>
				<div class="type-box">
					<el-select
						size="mini"
						filterable
						v-model="select.bindingStatus"
						placeholder="奖项类型"
						style="width:125px;"
						@change="val => refresh({ type: val, page: 1 })"
					>
						<el-option label="全部" value=" "></el-option>
						<el-option label="补贴" :value="0"></el-option>
						<el-option label="商品" :value="1"></el-option>
						<el-option label="神秘好礼" :value="2"></el-option>
					</el-select>
				</div>
			</template>
			<template #table-column-type="{scope}">
				<div v-if="scope.row.type == 0">补贴</div>
				<div v-if="scope.row.type == 1">商品</div>
				<div v-if="scope.row.type == 2">神秘好礼</div>
			</template>
			<template #table-column-app="{scope}">
				<div>{{ filterplatForm(scope.row.app) }}</div>
			</template>
			<template #table-column-orderConfig="{scope}">
				<div v-if="scope.row.orderConfig == 'open-h5'">h5跳转</div>
				<div v-if="scope.row.orderConfig == 'open-tb'">淘宝跳转</div>
				<div v-if="scope.row.orderConfig == 'open-jd'">京东跳转</div>
				<div v-if="scope.row.orderConfig == 'copy'">复制淘口令</div>
				<div v-if="scope.row.orderConfig == 'copy-close'">复制淘口令并关闭窗口</div>
			</template>
			<template #table-column-number="{scope}">
				<div v-if="scope.row.type == 1" style="color:#F70114">{{ scope.row.number }}</div>
			</template>
		</cl-crud>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import platform from '@/mixin/platform';
import stores from '@/utils/store';

export default {
	data() {
		return {
			select: {
				bindingStatus: ''
			}
		};
	},
	mixins: [platform],
	computed: {
		...mapGetters(['platformList']),
		filterplatForm() {
			return function(val) {
				return this.platformList.length == 0
					? val
					: this.platformList.filter(v => v.value == val)[0].label;
			};
		}
	},

	mounted() {},

	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.turntable.turntablePrize)
				.permission({
					update: true,
					delete: true,
					add: true
				})
				.set('dict', {
					label: {
						add: '添加奖品'
					}
				})
				.set('table', {
					columns: [
						{
							type: 'selection',
							align: 'center',
							width: 60
						},
						{
							label: '序号',
							type: 'index',
							align: 'center',
							width: 60
						},
						{
							label: '数据平台',
							prop: 'app',
							align: 'center'
						},
						{
							label: 'sdk平台',
							prop: 'sdkType',
							align: 'center'
						},
						{
							label: '奖品名称',
							prop: 'name',
							align: 'center'
						},
						{
							label: '跳转配置 ',
							prop: 'orderConfig',
							align: 'center'
						},
						{
							label: '备注 ',
							prop: 'remark',
							align: 'center',
							emptyText: '无'
						},
						{
							label: '奖项类型',
							prop: 'type',
							align: 'center'
						},
						{
							label: '创建时间',
							prop: 'createTime',
							align: 'center',
							sortable: 'custom',
							emptyText: '0'
						},
						{
							label: '修改时间',
							prop: 'updateTime',
							align: 'center',
							sortable: 'custom',
							emptyText: '0'
						},
						{
							label: '剩余个数',
							prop: 'number',
							align: 'center'
						}
					],

					op: {
						layout: ['edit', 'delete', 'slot-copy']
					}
				})
				.set('upsert', {
					sync: true,
					props: {
						width: '800px',
						labelWidth: '150px'
					},
					items: [
						{
							label: '数据平台',
							prop: 'app',
							span: 13,
							component: {
								name: 'el-select',
								props: {
									placeholder: '请选择平台',
									filterable: true,
									'default-first-option': true,
									clearable: true
								},
								options: this.options
							},
							rules: {
								required: true,
								message: '数据平台'
							}
						},
						{
							label: 'sdk平台',
							prop: 'sdkType',
							span: 13,
							component: {
								name: 'el-select',
								options: [
									{
										label: 'yzf',
										value: 'yzf'
									},
									{
										label: 'km',
										value: 'km'
									},
									{
										label: 'wx',
										value: 'wx'
									},
									{
										label: 'h5',
										value: 'h5'
									}
								]
							}
						},
						{
							label: '奖项名称',
							prop: 'name',
							span: 13,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入奖项名称',
									maxlength: 20,
									clearable: true
								}
							},
							rules: {
								required: true,
								message: '奖项名称'
							}
						},
						{
							prop: 'orderConfig',
							label: '下单配置',
							span: 13,
							component: {
								name: 'el-select',
								props: {
									placeholder: '下单配置',
									clearable: true
								},
								options: [
									{
										label: 'h5跳转',
										value: 'open-h5'
									},
									{
										label: '淘宝跳转',
										value: 'open-tb'
									},
									{
										label: '京东跳转',
										value: 'open-jd'
									},
									{
										label: '复制淘口令',
										value: 'copy'
									},
									{
										label: '复制淘口令并关闭窗口',
										value: 'copy-close'
									}
								]
							},
							rules: [
								{
									required: true,
									message: '请选择分享形式',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'remark',
							label: '备注',
							span: 13,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '备注'
								}
							}
						},
						{
							prop: 'type',
							label: '奖项类型',
							span: 13,
							value: 0,
							component: {
								name: 'el-select',
								options: [
									{
										label: '补贴',
										value: 0
									},
									{
										label: '商品',
										value: 1
									},
									{
										label: '神秘大礼',
										value: 2
									}
								],
								on: {
									change: e => {
										this.changeType(e);
									}
								}
							},
							rules: [
								{
									required: true,
									message: '请选择奖项类型',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'content',
							props: {
								labelWidth: '100px'
							},
							component: <div style="color:#FF4443">奖项内容</div>
						},
						{
							prop: 'amount',
							label: '金额',
							value: 0,
							span: 13,
							hidden: true,
							component: {
								name: 'el-input-number',
								attrs: {
									min: 0
								}
							},
							rules: [
								{
									required: true,
									message: '请输入金额',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'title',
							label: '标题',
							span: 13,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入标题'
								}
							},
							rules: [
								{
									required: true,
									message: '请输入标题',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'url',
							label: '跳转链接',
							span: 13,
							hidden: true,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入跳转链接'
								}
							},
							rules: [
								{
									required: true,
									message: '请输入跳转链接',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'pict',
							label: '图片',
							span: 13,
							hidden: true,
							component: {
								name: 'cl-upload',
								attrs: {
									placeholder: '请选择图片'
								}
							},
							rules: [
								{
									required: true,
									message: '请选择图片',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'price',
							label: '原价',
							span: 13,
							hidden: true,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入原价'
								}
							},
							rules: [
								{
									required: true,
									message: '请输入原价',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'endPrice',
							label: '券后价',
							span: 13,
							hidden: true,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入券后价'
								}
							},
							rules: [
								{
									required: true,
									message: '请输入券后价',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'tkl',
							label: '淘口令',
							span: 13,
							hidden: true,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入淘口令'
								}
							}
						}
					]
				})
				.on('open', async (isEdit, data) => {
					this.crud.setData(
						'upsert.items[prop:app].component.options',
						this.$store.state.topFilter.platList
					);
					if (isEdit) {
						let index = data.type;
						let content = JSON.parse(data.content);
						app.setForm('amount', content.amount);
						app.setForm('title', content.title);
						app.setForm('url', content.url);
						app.setForm('pict', content.pict);
						app.setForm('price', content.price);
						app.setForm('endPrice', content.endPrice);
						app.setForm('tkl', content.tkl);
						this.changeType(index);
					} else {
						app.setForm('app', stores.get('platForm'));
						this.crud.hiddenItem('amount', false);
						if (data) {
							let index = data.type;
							let content = JSON.parse(data.content);
							app.setForm('amount', content.amount);
							app.setForm('title', content.title);
							app.setForm('url', content.url);
							app.setForm('pict', content.pict);
							app.setForm('price', content.price);
							app.setForm('endPrice', content.endPrice);
							app.setForm('tkl', content.tkl);
							this.changeType(index);
						} else {
							this.changeType(0);
						}
					}
				})

				.on('submit', async (isEdit, data, { next }) => {
					if (isEdit) {
						let {
							id,
							app,
							sdkType,
							type,
							name,
							orderConfig,
							remark,
							amount,
							title,
							url,
							pict,
							price,
							endPrice,
							tkl
						} = data;
						let content = '';
						if (type == 0) {
							content = JSON.stringify({ amount });
						} else if (type == 1) {
							content = JSON.stringify({ title, url, pict, price, endPrice, tkl });
						} else if (type == 2) {
							content = JSON.stringify({ title, url, pict, tkl });
						}
						next({
							app,
							sdkType,
							type,
							name,
							orderConfig,
							remark,
							id,
							content
						});
					} else {
						let {
							app,
							sdkType,
							type,
							name,
							orderConfig,
							remark,
							amount,
							title,
							url,
							pict,
							price,
							endPrice,
							tkl
						} = data;
						let content = '';
						if (type == 0) {
							content = JSON.stringify({ amount });
						} else if (type == 1) {
							content = JSON.stringify({ title, url, pict, price, endPrice, tkl });
						} else if (type == 2) {
							content = JSON.stringify({ title, url, pict, tkl });
						}
						next({
							app,
							sdkType,
							type,
							name,
							orderConfig,
							remark,
							content
						});
					}
				})
				.set('layout', [
					[
						'refresh-btn',
						'add-btn',
						'multi-delete-btn',
						'flex1',
						'slot-select-type',
						'search-key'
					],
					['data-table'],
					['flex1', 'pagination']
				])
				.done();

			app.refresh({});
		},
		refresh(params) {
			this.crud.refresh(params);
		},
		changeType(index) {
			this.crud.hiddenItem('amount', index != 0);
			this.crud.hiddenItem('url', index == 0);
			this.crud.hiddenItem('pict', index != 1);
			this.crud.hiddenItem('price', index != 1);
			this.crud.hiddenItem('endPrice', index != 1);
			this.crud.hiddenItem('tkl', index == 0);
		},
		copyData(val) {
			this.crud.append({
				...val,
				id: ''
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.type-box {
	margin-right: 20px;
}
.form-li {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	&__title {
		width: 100px;
	}
}
.copy-btn {
	color: #409eff;
}
::v-deep.el-input {
	width: 500px;
}
</style>
